@import (reference) "~weaver-mobile/dist/weaver-mobile.less";

.fontsize-10px{
    font-size: 10*@hd;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
}

.hrm-sign{
    width: 100%;
    height: 100%;
    background: #fff;
    overflow: hidden;

    &>div{
        padding: 0px 16px;
    }

    .header{
        min-height: 45 * @hd;

        .calendar{
            width: 100%;
            height: 45 * @hd;
            line-height: 45 * @hd;
            &>div{
                margin-right: 8px;
                font-size: 17*@hd;
                color: #333333;
                float: left;
            }

            .icon{
                position: relative;
                top: 12px;
                float: left;
                margin-right: 8px;
            }

            .arrow{
                float: right;
                position: relative;
                top: 12px;
            }
        }

        .schedual{
            clear: both;
            display: none;
            word-break: break-all;
            padding-bottom: 10px;
            font-size: 13*@hd;
            color: #999;

            &-show{
                display: block;
            }
        }
    }

    .content{
        border-top: 1px solid #e9e9e9;
        border-bottom: 1px solid #e9e9e9;
        // overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        position: relative;

        .flow{
            z-index: 666;
            position: absolute;
            width: 100%;
            bottom: 0px;
            text-align: center;
            line-height: 30px;
            vertical-align: middle;
            background-color: #F2F2F2;
            left: -0px;

            .flow-link{
                cursor: pointer;
                color: #2D7AD8;
            }
        }

        .noData{
            width: 100%;
            height: 100%;
            display: table;
            text-align: center;

            &>div{
                text-align: center;
                display: table-cell;
                vertical-align: middle;

                .icon{
                    width: 50px;
                    height: 50px;
                }
                .msg{
                    padding-top: 12px;
                    color: #868686;
                    font-size: @font-size-base;
                }
            }
        }

        .bg{
            top: 0px;
            bottom: 0px;
            left: 25px;
            width: 1px;
            border-right: 1px solid #E6E6E6;
            position: absolute;
        }
        .timeLine .am-timeline{
            padding-left: 4px;
        }
        .timeLine{
            height: 100%;
            clear: both;
            height: calc(~"100% - 30px");
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            ul{
                margin:0;
            }
            .info{
                padding: 20px 0px 0px 0px;
                position: relative;
                clear: both;

                &-last{
                    padding-bottom: 30px;
                }

                .schedual{
                     .am-timeline-item-tail{
                        border-left: 1px solid #E6E6E6;
                    }
                    .am-timeline-item-content{
                        top: -3px;
                        margin-left:10px;
                    }
                    width: 100%;
                    .dot{
                        width: 20px;
                        height: 20px;
                        border-radius: 50%;
                        color: #fff;
                        float: left;
    
                        &-default{
                            background: #b4b4b4;
                            border-color: #b4b4b4;
                        }
    
                        &-active{
                            background: #61A8F5;
                            border-color: #61A8F5;
                        }

                        &>div{
                            margin-left: 3px;
                            margin-top: 3px;
                        }
                    }

                    .time{
                        // float: left;
                        padding-left: 18px;
                        padding-right: 18px;
                        height: 20px;
                        line-height: 20px;
                        color: #868686;
                    }

                    .signBtn{
                        position: relative;
                        top: -5px;
                    }

                    .btn-abnormal{
                        background: #F5BF61;
                        border-color: #F5BF61;
                    }
                }

                .info-content{
                    clear: both;
                    // position: relative;
                    // left: 39px;
                    font-size: @font-size-base;

                    &>div{
                        height: 24px;
                        line-height: 24px;
                        padding-left: 19px;
                    }
                    .signData{
                        .signTime{
                            float: left;
                            margin-right: 10px;
                        }
                        .status{
                            float: left;
                            margin-top: 2px;
                            padding: 0px 5px 0px 5px;
                        }
                    }

                    .position{
                        clear: both;
                        height: 24px;
                        line-height: 24px;
                        color: #999999;

                        .positionIcon{
                            float: left;
                            margin-right: 8px;
                            margin-top: 4px;
                        }
                        .positionInfo{
                            float: left;
                        }
                    }

                    .abnormal, .normal, .autoSign{
                        border-radius: 3px;
                        height: 18px;
                        line-height: 18px;
                        &>div{
                            .fontsize-10px;
                        }
                    }

                    .abnormal{
                        color: #FF913F;
                        border: 1px solid #FF913F;
                    }
                    .normal{
                        color: #999999;
                        border: 1px solid #E6E6E6;
                    }
                    .autoSign{
                        color: #61A8F5;
                        border: 1px solid #61A8F5;
                    }

                    .resign, .workflow{
                        clear: both;
                        height: 24px;
                        line-height: 24px;
                        margin-left: 23px;
                        color: #61A8F5;
                    }

                    .workflowButton{
                        clear: both;
                        float: left;
                        margin-top: 2px;
                        padding: 0px 5px 0px 20px;
                        color: #61A8F5;
                    }

                    .signPanel{
                        height: auto;
                        padding-left: 0px;

                        .btn{
                            width: 110px;
                            height: 110px;
                            border-radius: 50%;
                            background: #61A8F5;
                            margin: 0px auto;
                            text-align: center;
                            color: #fff;

                            .lbl{
                                font-size: @font-size-heading;
                                line-height: 20px;
                                padding-top: 35px;
                            }
                            .time{
                                font-size: @font-size-base;
                                line-height: 25px;
                                color: #fff;
                            }
                            
                            &-abnormal{
                                background: #F5BF61;
                            }
                            &-outside{
                                background: #76CC68;
                            }
                        }
                        
                        .msg{
                            padding-left: 36px;
                            height: 24px;
                            line-height: 24px;

                            &>div{
                                position: relative;
                                .checkInfo{
                                    position: absolute;
                                    left: 0px;
                                    right: 120px;
                                    height: 24px;
                                    &>div{
                                        position: absolute;
                                        // float: left;
                                        // padding-right: 5px;
                                        height: 100%;
                                        line-height: 24px;
                                    }

                                    .checkInfoIcon{
                                        left: 0px;
                                        right: 24px;
                                    }
                                    .checkInfoDetail{
                                        left: 24px;
                                        right: 0px;
                                    }

                                    .icon{
                                        padding-top: 2px;
                                    }
                                }
                                .relocation{
                                    position: absolute;
                                    right: 0px;
                                    width: 120px;
                                    color: #61A8F5;
                                    height: 24px;
                                    line-height: 24px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .footer{
        height: 45 * @hd;
        display: none;
    }
}